
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-recover"></i>
                    <div class="name">恢复</div>
                    <div class="fontclass">.icon-recover</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-browser"></i>
                    <div class="name">浏览器</div>
                    <div class="fontclass">.icon-browser</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-clear"></i>
                    <div class="name">清除</div>
                    <div class="fontclass">.icon-clear</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-money"></i>
                    <div class="name">人民币</div>
                    <div class="fontclass">.icon-money</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-question-mark"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-question-mark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-email"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.icon-email</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort"></i>
                    <div class="name">下移</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loading"></i>
                    <div class="name">加载</div>
                    <div class="fontclass">.icon-loading</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-refresh"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-refresh</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trash"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-trash</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sina"></i>
                    <div class="name">新浪</div>
                    <div class="fontclass">.icon-sina</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qqkongjian"></i>
                    <div class="name">QQ</div>
                    <div class="fontclass">.icon-qqkongjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eraser"></i>
                    <div class="name">清除</div>
                    <div class="fontclass">.icon-eraser</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-like"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-count"></i>
                    <div class="name">统计</div>
                    <div class="fontclass">.icon-count</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move"></i>
                    <div class="name">移动</div>
                    <div class="fontclass">.icon-move</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eye"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.icon-eye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-click"></i>
                    <div class="name">点击</div>
                    <div class="fontclass">.icon-click</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-click-rate"></i>
                    <div class="name">点击率</div>
                    <div class="fontclass">.icon-click-rate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-page-view"></i>
                    <div class="name">访问量</div>
                    <div class="fontclass">.icon-page-view</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">增加</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wechat"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-wechat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">五角星</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ticket"></i>
                    <div class="name">优惠劵</div>
                    <div class="fontclass">.icon-ticket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dele"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-dele</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shop"></i>
                    <div class="name">店铺</div>
                    <div class="fontclass">.icon-shop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-finish"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-finish</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rightarrow"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-rightarrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-broadcast"></i>
                    <div class="name">广播</div>
                    <div class="fontclass">.icon-broadcast</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taobaowang"></i>
                    <div class="name">淘宝网</div>
                    <div class="fontclass">.icon-taobaowang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yihaodian"></i>
                    <div class="name">一号店</div>
                    <div class="fontclass">.icon-yihaodian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dangdangwang"></i>
                    <div class="name">当当网</div>
                    <div class="fontclass">.icon-dangdangwang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rename"></i>
                    <div class="name">重命名</div>
                    <div class="fontclass">.icon-rename</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingdong"></i>
                    <div class="name">京东</div>
                    <div class="fontclass">.icon-jingdong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suningyigou"></i>
                    <div class="name">苏宁易购</div>
                    <div class="fontclass">.icon-suningyigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fullscreen"></i>
                    <div class="name">全屏</div>
                    <div class="fontclass">.icon-fullscreen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-narrow"></i>
                    <div class="name">缩小</div>
                    <div class="fontclass">.icon-narrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caution"></i>
                    <div class="name">警示</div>
                    <div class="fontclass">.icon-caution</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar1"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-calendar1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exchange"></i>
                    <div class="name">替换</div>
                    <div class="fontclass">.icon-exchange</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow"></i>
                    <div class="name">下拉箭头</div>
                    <div class="fontclass">.icon-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lastpage"></i>
                    <div class="name">最后页</div>
                    <div class="fontclass">.icon-lastpage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nextpage"></i>
                    <div class="name">下一页</div>
                    <div class="fontclass">.icon-nextpage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-poor-review"></i>
                    <div class="name">差评</div>
                    <div class="fontclass">.icon-poor-review</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-good-review"></i>
                    <div class="name">好评</div>
                    <div class="fontclass">.icon-good-review</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-medium-review"></i>
                    <div class="name">中评</div>
                    <div class="fontclass">.icon-medium-review</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remark"></i>
                    <div class="name">备注</div>
                    <div class="fontclass">.icon-remark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangwang"></i>
                    <div class="name">旺旺</div>
                    <div class="fontclass">.icon-wangwang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">对</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-flag"></i>
                    <div class="name">旗子</div>
                    <div class="fontclass">.icon-flag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stick"></i>
                    <div class="name">置顶</div>
                    <div class="fontclass">.icon-stick</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-crown"></i>
                    <div class="name">王冠</div>
                    <div class="fontclass">.icon-crown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-subtract"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-subtract</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-succeed"></i>
                    <div class="name">succeed</div>
                    <div class="fontclass">.icon-succeed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio"></i>
                    <div class="name">单选待选</div>
                    <div class="fontclass">.icon-radio</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio-checked"></i>
                    <div class="name">单选已选中</div>
                    <div class="fontclass">.icon-radio-checked</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox"></i>
                    <div class="name">多选待选</div>
                    <div class="fontclass">.icon-checkbox</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-checked"></i>
                    <div class="name">多选已选中</div>
                    <div class="fontclass">.icon-checkbox-checked</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-indeterminate"></i>
                    <div class="name">半选中</div>
                    <div class="fontclass">.icon-indeterminate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload1"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-upload1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-background-color"></i>
                    <div class="name">纯色背景</div>
                    <div class="fontclass">.icon-background-color</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-return"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-return</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-target"></i>
                    <div class="name">目标</div>
                    <div class="fontclass">.icon-target</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-people"></i>
                    <div class="name">人数</div>
                    <div class="fontclass">.icon-people</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package"></i>
                    <div class="name">包裹</div>
                    <div class="fontclass">.icon-package</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-refund"></i>
                    <div class="name">退款</div>
                    <div class="fontclass">.icon-refund</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-clock"></i>
                    <div class="name">闹钟</div>
                    <div class="fontclass">.icon-clock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ju"></i>
                    <div class="name">聚划算</div>
                    <div class="fontclass">.icon-ju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cargo"></i>
                    <div class="name">货物</div>
                    <div class="fontclass">.icon-cargo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-success-order"></i>
                    <div class="name">订单成功</div>
                    <div class="fontclass">.icon-success-order</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close-order"></i>
                    <div class="name">关闭订单</div>
                    <div class="fontclass">.icon-close-order</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-order"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-order</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-express-car"></i>
                    <div class="name">快递车</div>
                    <div class="fontclass">.icon-express-car</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Courier"></i>
                    <div class="name">快递员</div>
                    <div class="fontclass">.icon-Courier</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pay"></i>
                    <div class="name">支付</div>
                    <div class="fontclass">.icon-pay</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building"></i>
                    <div class="name">房子</div>
                    <div class="fontclass">.icon-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-turn"></i>
                    <div class="name">流转</div>
                    <div class="fontclass">.icon-turn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exclamation-mark"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.icon-exclamation-mark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sync"></i>
                    <div class="name">同步</div>
                    <div class="fontclass">.icon-sync</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.icon-folder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add-folder"></i>
                    <div class="name">新建文件</div>
                    <div class="fontclass">.icon-add-folder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tag"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-tag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell"></i>
                    <div class="name">铃铛</div>
                    <div class="fontclass">.icon-bell</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-editorial-background"></i>
                    <div class="name">编辑背景</div>
                    <div class="fontclass">.icon-editorial-background</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-able"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-able</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diable"></i>
                    <div class="name">不符合</div>
                    <div class="fontclass">.icon-diable</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-view-list"></i>
                    <div class="name">查看列表</div>
                    <div class="fontclass">.icon-view-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-set-up"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-set-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-basic-information"></i>
                    <div class="name">基本信息</div>
                    <div class="fontclass">.icon-basic-information</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-interaction"></i>
                    <div class="name">相互作用</div>
                    <div class="fontclass">.icon-interaction</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-view-chart"></i>
                    <div class="name">查看图表</div>
                    <div class="fontclass">.icon-view-chart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoppingcart"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-shoppingcart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customer"></i>
                    <div class="name">顾客</div>
                    <div class="fontclass">.icon-customer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-invite-collect"></i>
                    <div class="name">邀请收藏</div>
                    <div class="fontclass">.icon-invite-collect</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collect-goods"></i>
                    <div class="name">收藏商品</div>
                    <div class="fontclass">.icon-collect-goods</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collect-shop"></i>
                    <div class="name">收藏店铺</div>
                    <div class="fontclass">.icon-collect-shop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shopping-cart"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-shopping-cart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-man"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-browse-goods"></i>
                    <div class="name">浏览商品</div>
                    <div class="fontclass">.icon-browse-goods</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lottery"></i>
                    <div class="name">抽奖</div>
                    <div class="fontclass">.icon-lottery</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shift"></i>
                    <div class="name">切换</div>
                    <div class="fontclass">.icon-shift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hide"></i>
                    <div class="name">隐藏</div>
                    <div class="fontclass">.icon-hide</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-appear"></i>
                    <div class="name">显示</div>
                    <div class="fontclass">.icon-appear</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card"></i>
                    <div class="name">会员卡</div>
                    <div class="fontclass">.icon-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-all"></i>
                    <div class="name">全部</div>
                    <div class="fontclass">.icon-all</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-create-orders"></i>
                    <div class="name">新建工单</div>
                    <div class="fontclass">.icon-create-orders</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pause"></i>
                    <div class="name">终止</div>
                    <div class="fontclass">.icon-pause</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qrcode"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-qrcode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-new"></i>
                    <div class="name">新</div>
                    <div class="fontclass">.icon-new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-line-star"></i>
                    <div class="name">空心五角星</div>
                    <div class="fontclass">.icon-line-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-details"></i>
                    <div class="name">明细</div>
                    <div class="fontclass">.icon-details</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-information"></i>
                    <div class="name">用户信息</div>
                    <div class="fontclass">.icon-user-information</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-invited"></i>
                    <div class="name">邀</div>
                    <div class="fontclass">.icon-invited</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shop1"></i>
                    <div class="name">店铺</div>
                    <div class="fontclass">.icon-shop1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-file"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-file</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more1"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-more1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-info"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dialogfill"></i>
                    <div class="name">对话</div>
                    <div class="fontclass">.icon-dialogfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-purse"></i>
                    <div class="name">钱袋</div>
                    <div class="fontclass">.icon-purse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gather"></i>
                    <div class="name">聚划算</div>
                    <div class="fontclass">.icon-gather</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-product"></i>
                    <div class="name">商品</div>
                    <div class="fontclass">.icon-product</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-precent"></i>
                    <div class="name">百分号</div>
                    <div class="fontclass">.icon-precent</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-number-full"></i>
                    <div class="name">手机号</div>
                    <div class="fontclass">.icon-number-full</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-system"></i>
                    <div class="name">系统</div>
                    <div class="fontclass">.icon-system</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-topic"></i>
                    <div class="name">话题</div>
                    <div class="fontclass">.icon-topic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statistic"></i>
                    <div class="name">统计</div>
                    <div class="fontclass">.icon-statistic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-timing"></i>
                    <div class="name">计时</div>
                    <div class="fontclass">.icon-timing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reserve"></i>
                    <div class="name">定金</div>
                    <div class="fontclass">.icon-reserve</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-part"></i>
                    <div class="name">部分</div>
                    <div class="fontclass">.icon-part</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taobao-fill"></i>
                    <div class="name">淘宝</div>
                    <div class="fontclass">.icon-taobao-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-RMB"></i>
                    <div class="name">人民币</div>
                    <div class="fontclass">.icon-RMB</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-consume"></i>
                    <div class="name">消耗绩点</div>
                    <div class="fontclass">.icon-consume</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mail"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.icon-mail</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gain"></i>
                    <div class="name">获得绩点</div>
                    <div class="fontclass">.icon-gain</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goods"></i>
                    <div class="name">商品</div>
                    <div class="fontclass">.icon-goods</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checked-tri"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-checked-tri</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-single-sign-on"></i>
                    <div class="name">单点登录</div>
                    <div class="fontclass">.icon-single-sign-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Final-Payment"></i>
                    <div class="name">尾款</div>
                    <div class="fontclass">.icon-Final-Payment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-forward-sale"></i>
                    <div class="name">预售</div>
                    <div class="fontclass">.icon-forward-sale</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-perspective"></i>
                    <div class="name">透视</div>
                    <div class="fontclass">.icon-perspective</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pen"></i>
                    <div class="name">笔</div>
                    <div class="fontclass">.icon-pen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-process"></i>
                    <div class="name">设计中</div>
                    <div class="fontclass">.icon-process</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhihangzhong"></i>
                    <div class="name">执行中</div>
                    <div class="fontclass">.icon-zhihangzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pend"></i>
                    <div class="name">待审批</div>
                    <div class="fontclass">.icon-pend</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-complete"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-complete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-warning"></i>
                    <div class="name">出错</div>
                    <div class="fontclass">.icon-warning</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-evaluate"></i>
                    <div class="name">评价</div>
                    <div class="fontclass">.icon-evaluate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customer_info"></i>
                    <div class="name">客户信息</div>
                    <div class="fontclass">.icon-customer_info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-description"></i>
                    <div class="name">描述</div>
                    <div class="fontclass">.icon-description</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-return-express"></i>
                    <div class="name">逆向物流</div>
                    <div class="fontclass">.icon-return-express</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trial-good"></i>
                    <div class="name">试用</div>
                    <div class="fontclass">.icon-trial-good</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export1"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-export1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leadin"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.icon-leadin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-warning1"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.icon-warning1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-luckbag"></i>
                    <div class="name">福袋</div>
                    <div class="fontclass">.icon-luckbag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lose_picture"></i>
                    <div class="name">图片加载失败</div>
                    <div class="fontclass">.icon-lose_picture</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-award-title"></i>
                    <div class="name">题名</div>
                    <div class="fontclass">.icon-award-title</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock1"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-lock1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-circle-spot"></i>
                    <div class="name">圆形-热点</div>
                    <div class="fontclass">.icon-circle-spot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-square-spot"></i>
                    <div class="name">方形-热点</div>
                    <div class="fontclass">.icon-square-spot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">短信</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statistics"></i>
                    <div class="name">统计</div>
                    <div class="fontclass">.icon-statistics</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cry"></i>
                    <div class="name">哭</div>
                    <div class="fontclass">.icon-cry</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-normal"></i>
                    <div class="name">一般</div>
                    <div class="fontclass">.icon-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-smile"></i>
                    <div class="name">笑</div>
                    <div class="fontclass">.icon-smile</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shop11"></i>
                    <div class="name">店铺</div>
                    <div class="fontclass">.icon-shop11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diannao"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-diannao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tips"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.icon-tips</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengluerweima"></i>
                    <div class="name">登录二维码</div>
                    <div class="fontclass">.icon-dengluerweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengludiannao"></i>
                    <div class="name">登录电脑</div>
                    <div class="fontclass">.icon-dengludiannao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-yhd"></i>
                    <div class="name">一号店</div>
                    <div class="fontclass">.icon-cl-yhd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-sn"></i>
                    <div class="name">苏宁</div>
                    <div class="fontclass">.icon-cl-sn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-jd"></i>
                    <div class="name">京东</div>
                    <div class="fontclass">.icon-cl-jd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-wx"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-cl-wx</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-tb"></i>
                    <div class="name">淘宝</div>
                    <div class="fontclass">.icon-cl-tb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-dd"></i>
                    <div class="name">当当</div>
                    <div class="fontclass">.icon-cl-dd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cl-tm"></i>
                    <div class="name">天猫</div>
                    <div class="fontclass">.icon-cl-tm</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
